
<template>
    <el-card class="box-card">
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-breadcrumb separator-class="el-icon-arrow-right">
                                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                <el-breadcrumb-item :to="{ path: '/' }">物流信息</el-breadcrumb-item>
                                <el-breadcrumb-item>司机需求</el-breadcrumb-item>

                            </el-breadcrumb>
                        </div>
                    </el-col>
                    <el-col class="kuang-left" :span="12">
                        <div class="input-kuang">
                            <div style="margin-bottom: 15px; margin-left: 120px;">
                                <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                                    <el-select v-model="select" slot="prepend" placeholder="请选择">
                                        <el-option label="货物联系人" value="1"></el-option>
                                        <el-option label="联系电话" value="2"></el-option>
                                        <el-option label="用户电话" value="3"></el-option>
                                    </el-select>
                                    <el-button slot="append" icon="el-icon-search"></el-button>
                                </el-input>
                            </div>
                            <div class="anniu">
                                <el-button round>添加</el-button>
                            </div>


                        </div>

                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <template>
                    <!--分页实质：利用splice函数对数组进行分割，currentPage代表当前页，items代表每页条数，分割函数的实质是从起点索引到终点索引进行分割
                    ，currentPage-1代表起点索引，items*currentPage，再加一点击事件使得翻页时currentPage+1，使得当前起点索引和终点索引发生变化，使得表内数据
                传入变化，再调用刷新函数（也就是再重新为表赋值一次，或其他刷新方法）达到分页效果-->
                    <el-table class="biaoge" :data="tableData.light.slice((page-1)*item,item*page)" border
                        style="width: 75%">
                        <el-table-column fixed prop="sj_eno" label="司机编号" width="80">
                        </el-table-column>
                        <el-table-column prop="sj_style" label="车辆类型" width="120">
                        </el-table-column>
                        <el-table-column prop="sj_number" label="车牌号" width="130">
                        </el-table-column>
                        <el-table-column prop="sj_brand" label="品牌" width="120">
                        </el-table-column>
                        <el-table-column prop="sj_name" label="车主姓名" width="110">
                        </el-table-column>
                        <el-table-column prop="sj_tele" label="联系电话" width="120">
                        </el-table-column>
                        <el-table-column prop="sj_carplace" label="车辆停放位置" width="100">
                        </el-table-column>

                        <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button type="text" @click="handleClick(scope.row)">编辑</el-button>
                                <el-button @click="handleDelete(scope.row.wl_eno)" type="text" size="small">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-main>



            <el-footer class="footer" height="80px">
                <el-container>
                    <el-header class="fenye-ui">
                        <el-col class="col-left" :span="12">
                            <span>总计{{ tableData.light.length }}条司机信息</span>
                        </el-col>
                        <el-col class="col-right" :span="12">
                            <el-pagination :page-size="item" :total="tableData.light.length"
                                layout="total,prev, pager, next" :current-page="page" @current-change="change">
                            </el-pagination>
                        </el-col>
                    </el-header>

                    <el-main>
                        2022 &copy; HuiTong ParkingLot
                    </el-main>
                </el-container>
            </el-footer>
        </el-container>

    </el-card>
</template>
        
        
<script>

import axios from 'axios'
import { reactive, ref } from 'vue'
export default {
    setup() {
        let tableData = reactive({ light: [] });
        let page = ref(1);
        let item = ref(7);

        const change = (val) => {
            page.value = val
        };

        axios({
            method: 'get',//请求类型
            url: 'http://localhost:8081/driver/cha'
        }).then(response => {
            console.log(response);
            tableData.light = response.data.data;
        })

        //删除功能
        let sj_eno = ref("")
        const handleDelete = (id) => {
            let sj_eno =Number.parseInt(id)
          
            fetch(`http://localhost:8081/driver/shan/${sj_eno}`, {
                method: 'delete',
                headers: {
                    'Content-Type': 'application/json'
                },
            }).then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert(data.message)

                        axios({
                            method: 'get',//请求类型
                            url: 'http://localhost:8081/driver/cha'
                        }).then(response => {
                            tableData.light = response.data.data;
                        })
                    }
                });
        }


        return {
            tableData,
            item,
            page,
            change,
            sj_eno,
            handleDelete,
        }



    }

}

</script>
        
        
        
<style scoped>
/*子页面卡片* */
.el-card {
    margin-top: 5px;
    height: 62 0px;
    margin-left: 0px;

    border-radius: 30px;

}

/**卡片中的整体布局 */
.el-container {
    padding: 2;
    margin: 0;



}

/**布局中 容器头部--包含面包屑，输入框 */
.el-header {
    max-height: 24px;

}

/**面包屑 */
.el-icon-arrow-right {
    margin-left: 100px;
    text-align: center;
    align-items: center;
}

/**输入框的外部 */
.kuang-left {

    text-align: center;
    align-items: center;
    right: 100px;


}

/**输入框 */
.input-kuang {
    display: flex;
    /**水平对齐 -靠左*/
    justify-content: flex-start;

}

/**添加按钮 */
.anniu {
    justify-content: flex-end;
    margin-left: 5px;

    font-size: 20px;
    letter-spacing: 8px;
}

/**容器中间  */
.el-main {
    height: 520px;

}

/**表格样式  */
.biaoge {
    margin: auto;
}

/**容器 底部*/
.el-footer {
    height: 250px;

}


/**总计 */
.col-right {

    margin-top: 8px;
    font-size: 20px;

}

/**分页 */
.col-left {
    color: rgb(130, 152, 207);
    font-size: 20px;
    margin-top: 8px;
    letter-spacing: 2px;
}
</style>